<template lang="pug">
el-drawer(
  class="bwt-drawer"
  :model-value="props.visible"
  :before-close="handleClose"
  :size="props.width"
  :close-on-click-modal="false"
  :append-to-body="true"
  :show-close="true"
  :destroy-on-close="destroyOnClose"
  :wrapperClosable="false"
  :close-on-press-escape="props.closeOnPressEscape"
  @close="props.close"
)
  template(#header)
    .drawer-header
      span.el-dialog__title {{ props.title }}
      slot(name="right")
  slot
  template(#footer)
    .drawer-footer(v-if="props.showFooter" :style="{width: props.width}")
      el-button(v-if="props.showCancel" @click="handleClose") {{ props.cancelText }}
      el-button(v-if="props.showConfirm" type="primary" style="margin-right: 16px;" @click="handleConfirm" :loading="props.loading") {{ props.confirmText }}
</template>

<script setup name="BwtDrawer" lang="jsx">
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  autoclose: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: '确 定'
  },
  cancelText: {
    type: String,
    default: '取 消'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: '40%'
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  close: {
    type: Function,
    default: () => {}
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits();
const { proxy } = getCurrentInstance();

function handleClose() {
  if (props.loading) return proxy.$message.warning('正在处理请求，请稍等')
  emit('input', false)
  emit('cancel')
}
function handleConfirm() {
  if (props.autoclose) {
    if (props.loading) return
    emit('input', false)
  }
  emit('confirm')
}
</script>
<style lang="scss">
.bwt-drawer {
  .el-drawer__header {
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    background: #FAFAFA;
    margin-bottom: 28px;
    .el-dialog__title {
      height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 550;
      font-size: 16px;
      color: #333333;
      line-height: 20px;
      text-align: left;
    }
  }
  .el-drawer__container {
    position: relative;
    bottom: 0;
    right: 0;
    top: 10%;
    height: 90%;
  }
  .el-drawer__body {
    padding: 0 48px;
    overflow-x: hidden;
    margin-bottom: 56px;
    .vue-treeselect__control, .vue-treeselect__menu-container, .el-input__inner {
      width: 240px;
    }
    .drawer-footer {
      height: 56px;
      line-height: 56px;
      text-align: right;
      position: fixed;
      bottom: 0px;
      right: 0px;
      box-shadow: 0px 4px 20px 0px rgba(20, 20, 21, 0.1);
      z-index: 10;
    }
  }
}
</style>
